<template>
	<view class="session_page">
		<scroll-view class="session_list" scroll-y>
			<block v-if="users.length > 0">
				<view v-for="(item, index) in users" :key="index" class="user_item" :data-index="index">
					<view class="user_content" @click="selectSession(item)">
						<view class="user_left">
							<image :src="item.Avatar"></image>
						</view>
						<view class="user_right">
							<view class="intername">{{ item.Name }}</view>
							<view class="infor">{{ item.NickName }}</view>
						</view>
					</view>
				</view>
			</block>
			<view v-else class="no_session">
				<image class="no_session_img" src="../../static/img/noSession.png" mode="widthFix"></image>
				<view>赶快添加新好友吧</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import io from '@hyoga/uni-socket.io';
	export default {
		data() {
			return {
				users: this.$store.state.allSessionList,
				page: {
					pageIndex: 1,
					pageSize: 30,
				},
				historySessionPage: {
					pageIndex: 1,
					pageSize: 30,
				},
				contentPage: {
					pageIndex: 1,
					pageSize: 30,
				},
			}
		},
		mounted() {
			this.initSocket();
			this.getUserList();
			this.getHistorySession();
			this.getContent();
		},
		methods: {
			initSocket() {
				const socket = io(this.$Config.SOCKETAPI, {
					query: {},
					transports: ['websocket', 'polling'],
					timeout: 5000,
				});
				this.$store.commit('setPropName', {
					propName: 'socket',
					value: socket
				});
				this.$store.state.socket.on("connect", () => {
					console.log("连接成功");
					this.$store.state.socket.emit("joinChat", {
						SendId: this.$store.state.sender.Id,
						SendName: this.$store.state.sender.Name,
						ReviceId: -1,
						ReviceName: "",
						NoCode: this.$store.state.noCode,
					});
				});
				this.$store.state.socket.on("disconnect", () => {
					console.log("连接已断开");
				});
				//修改信息状态
				this.$store.state.socket.on("changMsgState", (data) => {
					let conversitionList = this.$store.state.conversitionList;
					conversitionList.map((x) => {
						if (x.NoCode != null && x.NoCode == data.NoCode) {
							x.State = 1;
						}
					});
					this.$store.commit('setPropName', {
						propName: 'conversitionList',
						value: conversitionList
					});
				});
				// 加入会话成功
				this.$store.state.socket.on("joinSuccess", (data) => {
					// this.$store.commit('setPropName', {
					// 	propName: 'conversitionList',
					// 	value: data.conversition
					// });
					// if (this.$store.state.sessionList.length == 0) {
					// 	this.$store.commit('setPropName', {
					// 		propName: 'sessionList',
					// 		value: data.historySessionList
					// 	});
					// }
				});
				//接收信息
				this.$store.state.socket.on("reviceMsg", (data) => {
					if (data.ReciverId == this.$store.state.sender.Id) {
						// store.playMusic();
						for (let item of this.$store.state.sessionList) {
							let id = item?.FormId || item?.Id;
							if (id == data.SendId && this.$store.state.sessionSelectId == data.SendId) {
								data.ReadFlag = true;
								let query = {
									SendId: data.SendId,
									ReciverId: this.$store.state.sender.Id,
								};
								this.$store.state.socket.emit("changeMsgRead", query);
								break;
							}
						}
					}
					this.$Common.sendLocal(data);
					let len = this.$store.state.sessionList.filter((x) => {
						let id = x?.FormId || x.Id;
						return id == data.SendId;
					})?.length ?? 0;
					if (len === 0) {
						let item = this.$store.state.allSessionList.find((x) => x.Id == data.SendId);
						let sessionList = this.$store.state.sessionList;
						let session = {
							FormId: item.Id,
							Name: item.Name,
							NickName: item.NickName,
							PersonalitySign: item.PersonalitySign,
							Mobile: item.Mobile,
							Region: item.Region,
							Avatar: item.Avatar,
							Email: item.Email,
							ById: this.$store.state.sender.Id,
						};
						sessionList.push(session);
						this.$store.commit('setPropName', {
							propName: 'sessionList',
							value: sessionList
						});
					}
					this.$Common.toBottom();
				});
				//多设备在线时，强制旧设备下线
				this.$store.state.socket.on("squeezeOut", (data) => {
					if (data.noCode == this.$store.state.noCode) {
						this.$Common.logout();
						this.$Common.tipMsg("账户在其他地方登陆，会话已断开");
						this.$Common.redirectTo("/index/index");
					}
				});
			},
			getUserList() {
				this.$Request.post(this.$Config.APIURL + "/api/userList", {
					id: this.$store.state.sender.Id,
					pageIndex: this.page.pageIndex,
					pageSize: this.page.pageSize,
				},"application/x-www-form-urlencoded",false).then(res => {
					if (res?.code == 200) {
						this.$store.commit("updateList", {
							propName:"allSessionList",
							value: res.data
						});
						if (res?.data.length == this.page.pageSize){
							this.page.pageIndex += 1;
							this.getUserList();
						}
					} else {
						this.users = [];
						this.$Common.tipMsg(res.message)
					}
				})
			},
			getHistorySession() {
				this.$Request.post(this.$Config.APIURL + "/api/getHistorySessionById", {
					id: this.$store.state.sender.Id,
					pageIndex: this.historySessionPage.pageIndex,
					pageSize: this.historySessionPage.pageSize,
				},"application/x-www-form-urlencoded",false).then(res => {
					if (res?.code == 200) {
						this.$store.commit("updateList", {
							propName:"sessionList",
							value: res.data
						});
						if (res?.data.length == this.historySessionPage.pageSize){
							this.historySessionPage.pageIndex += 1;
							this.getHistorySession();
						}
					} else {
						this.$Common.tipMsg(res.message)
					}
				})
			},
			getContent() {
				this.$Request.post(this.$Config.APIURL + "/api/getContentBySendId", {
					id: this.$store.state.sender.Id,
					pageIndex: this.contentPage.pageIndex,
					pageSize: this.contentPage.pageSize,
				},"application/x-www-form-urlencoded",false).then(res => {
					if (res?.code == 200) {
						this.$store.commit("updateList", {
							propName:"conversitionList",
							value: res.data
						});
						if (res?.data.length == this.contentPage.pageSize){
							this.contentPage.pageIndex += 1;
							this.getHistorySession();
						}
					} else {
						this.$Common.tipMsg(res.message)
					}
				})
			},
			// 选择会话用户
			selectSession(item) {
				let allSessionSelectId = item.FormId || item.Id;
				this.$store.commit('setPropName', {
					propName: 'allSessionSelectId',
					value: allSessionSelectId,
					});
				this.$store.commit('setPropName', {
					propName: 'readyReciver',
					value: item
				});
				this.$Common.navigateTo("/userDetail/userDetail");
			}
		}
	}
</script>

<style scoped lang="scss">
	.session_page {
		height: 100%;
		width: 100%;

		.session_list {
			height: 100%;
			width: 100%;
			overflow: auto;

			.user_item {
				height: 150rpx;
				width: 100%;
				position: relative;
				box-sizing: border-box;

				.user_content {
					height: 100%;
					width: 100%;
					display: flex;

					.user_left {
						width: 18%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						image {
							height: 100rpx;
							width: 100rpx;
						}
					}

					.user_right {
						width: 82%;
						height: 100%;
						border-bottom: 1px solid #EFEFEF;
						text-align: left;

						.intername {
							height: 40px;
							line-height: 40px;
						}

						.infor {
							font-size: 12px !important;
							color: #707070;
							width: 98%;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}

				.remove {
					width: 160rpx;
					height: 100%;
					background-color: #FF5252;
					color: white;
					position: absolute;
					top: 0;
					right: -160rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
				}
			}

			.no_session {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				text-align: center;
				font-size: 34rpx;
				color: #C8C7CC;

				.no_session_img {
					width: 200rxp;
					height: auto;
				}
			}

		}
	}
</style>
